<template>
	<view>
		<view class="form">
			<view class="contact">
				<view class="line">
					<view class="key">联系人</view>
					<input type="text" value="" placeholder="姓名" v-model="obj.contact"/>
				</view>
				<view class="line">
					<view class="key">性别</view>
					<radio-group @change="genderChange" :style="{'display':'flex'}">
						<label  v-for="(item) in genders" :key="item" class="radio">
							<view>
								<radio :value="item"  color="#007AFF"/>
							</view>
							<view>{{item}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="phone line">
				<view class="key">电话</view>
				<input type="text" value="" placeholder="手机号码" v-model="obj.phone"/>
			</view>
			<view class="address line">
				<view class="key">地址</view>
				<input type="text" v-model="addrObj.address" :style="{'width':'450rpx'}"
				placeholder="选择收货地址" disabled @click="choose"/>
				<uni-icons type="arrowright" size="20" color="#D8D8D8"></uni-icons>
			</view>
			<view class="supplyment">
				<view class="line">
					<view class="key">补充说明</view>
					<input type="text" value="" placeholder="详细地址(如门牌号等)" v-model="obj.supplement"/>
				</view>
				<view class="line">
					<view class="key">类别</view>
					<radio-group @change="typeChange" :style="{'display':'flex'}">
						<label  v-for="(item) in types" :key="item" class="radio">
							<view>
								<radio :value="item"   color="#007AFF"/>
							</view>
							<view>{{item}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="sure">
			<button type="primary" @click="go">确定</button>
		</view>
		
		
	</view>
</template>

<script>
	import uniIcons from "../../components/uni-icons/uni-icons.vue"
	import http from '@/api/http.js'
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				genders:['先生','女士'],
				types:['家','公司','学校'],
				obj:{
					contact:"",
					gender:"",
					phone:"",
					address:"",
					type:"",
					supplement:"",
					location:""
				}
			};
		},
		methods:{
			...mapMutations(['deleteAddress']),
			genderChange(e){
				this.obj.gender = e.detail.value;
			},
			typeChange(e){
				this.obj.type = e.detail.value;
			},
			async go(){
				this.obj.address = this.addrObj.address;
				this.obj.location = this.addrObj.location;
				console.log(this.obj);
				let str = JSON.stringify(this.obj);
				let res =await http.add_address(this.userInfo.username,str);
				this.deleteAddress();
			},
			choose(){
				uni.navigateTo({
					url:'../selectaddr/selectaddr'
				})
			}
		},
		components:{
			uniIcons
		},
		computed:{
			...mapState(['addrObj','userInfo'])
		}
	}
</script>

<style lang="scss">
	.radio{
		display: flex;
		padding-right: 10rpx;
	}
	page{
		background: #f5f5f5;
	}
	.form{
		background: #fff;
		margin-top: 30rpx;

		.line{
			height: 60rpx;
			padding: 20rpx 30rpx;
			border: 1rpx solid #e4e4e4;
			display: flex;
			.key{
				width: 180rpx;
			}
		}
	}
	.sure{
		margin-top: 60rpx;
		padding: 0 30rpx;
	}


</style>
